<template>
    <div class="icons">
      <swiper class="swiper-container" :options="swiperOption">
        <swiper-slide v-for="(page,index) of pages" :key="index">
          <div
            class="icon"
            v-for="item of page"
            :key="item.id"
          >
            <div class="icon-img">
              <img class="icon-img-content" :src="item.imgUrl" alt="">
            </div>
            <p class="icon-desc">{{item.desc}}</p>
          </div>
        </swiper-slide>
      </swiper>
    </div>
</template>

<script>
    export default {
      name: "HomeIcons",
      props:{
        list:Array
      },
      data (){
        return{
          swiperOption:{
            autoplay:false
          }
        }
      },
      computed:{
        pages (){
          const pages = []
          this.list.forEach((item,index) => {
            const page = Math.floor(index / 8)
            if (!pages[page]){
              pages[page] = []
            }
            pages[page].push(item)
          })
          return pages;
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
.icons
  height:0
  padding-bottom:50% //高度是宽度的一半
  overflow:hidden
  .icon
    position: relative
    overflow: hidden
    float:left
    width: 25%
    height:0
    padding-bottom: 25% //相对于icons,width是25%，height也是25%
    .icon-img
      position:absolute
      top:0
      left:0
      right:0
      bottom:.44rem
      box-sizing:border-box
      padding:.1rem
      .icon-img-content
        display:block
        margin:0 auto
        height: 100%
    .icon-desc
      position:absolute
      left:0
      right:0
      bottom:0
      text-align:center
      height:.44rem
      line-height:.44rem
      color: $darkTextColor
      ellipsis()



      

</style>
